<style>
.k-grid td {
    white-space: nowrap;
    overflow: hidden;
}
 
.k-grid table {
    table-layout: fixed;
}

.k-edit-form-container
{
	text-align:center;
	width:100%;
}
</style>
<script type="text/javascript" src="/js/app/adv.js"></script>

<script>   
    var grid = null;    	
    $(document).ready(function() {				
        grid = new Adv.Grid("grid");							
		
		$("#tabstrip").kendoTabStrip();
		
		$("#_ddlMonitor").kendoComboBox({            
            placeholder: "Select monitor",
            dataTextField: "domain",
            dataValueField: "id",
            filter: "contains",
            dataSource: {
                transport: {
                    read: {
                        url: "/hyip/getMonitorValues",
                        dataType: "json"
                    }
                }
            }
        });
		
		$("#_ddlHyip").kendoComboBox({            
            placeholder: "Select hyip",
            dataTextField: "domain",
            dataValueField: "id",
            filter: "contains",
            dataSource: {
                transport: {
                    read: {
                        url: "/hyip/getActiveDomain",
                        dataType: "json"
                    }
                }
            }
        });
		
		 $("#_startDate").kendoDatePicker({            
            format: "yyyy-MM-dd"
           });
        
         $("#_endDate").kendoDatePicker({            
            format: "yyyy-MM-dd"
	   });
    });
    
    function btnSearchClick()
    {
        grid.refresh();
    } 	
	
</script>

<script id="budgetTemplate" type="text/x-kendo-template">
<div style="width:700px; text-align:left;">
<dl>
	<dt>Monitor:</dt>
	<dd><input type="text" id="ddlMonitor" name="monitorId"/></dd>
	<dt>Hyip:</dt>
	<dd><input type="text" id="ddlHyip" name="hyipId"/></dd>
	<dt >Start date: </dt>
	<dd ><input id="startDate" name="startDate" data-bind="value:startDate" data-role="datepicker" data-format="dd/MM/yyyy" /></dd>	
	<dt >End date: </dt>
        <dd ><input id="endDate" name="endDate" data-bind="value:endDate" data-role="datepicker" data-format="dd/MM/yyyy"/></dd>	
	<dt><label for="cost">Cost: </label></dt>
	<dd><input type="text" name="cost" data-bind="value:cost" style="width:150;"/></dd>
 </dl>
<div style="clear:both;"></div>
 <div style="padding-left:100px;">
 Description:<br/>
 <textarea rows="10" cols="30" style="width:500px;height:250px" data-bind="value:description" data-role="editor"></textarea>
 </div>
 </div>
</script>

<div id="tabstrip">
	<ul>
		<li class="k-state-active">
			Search
		</li>        		
	</ul>
	<div id="frmSearch" class="form" style="width:700px;">		
<dl>
	<dt>Monitor:</dt>
	<dd><input type="text" id="_ddlMonitor"/></dd>
	<dt>Hyip:</dt>
	<dd><input type="text" id="_ddlHyip"/></dd>
	<dt >Start date: </dt>
	<dd ><input id="_startDate" style="width:200px" /></dd>	
	<dt >End date: </dt>
    <dd ><input id="_endDate" style="width:200px" /></dd>	
 </dl>
<div style="clear:both;"></div>
	<div style="text-align:center;">
		<button class="k-button long" onclick="btnSearchClick();">Search</button>
	</div>
</div>		
</div>
<div id="grid" style="height:600px;"></div>
